<template>
	<div>
		<el-row>
			<el-col :span="6">
				<el-card class="global-el-card">
					<template #header>
						<div class="my-card-header">
							<span>目录结构</span>
						</div>
					</template>
					<el-tree :data="menudata" :props="defaultProps" @node-click="NodeClick" />
				</el-card>
			</el-col>
			<el-col :span="18">
				<el-card class="global-el-card">
					<template #header>
						<div class="my-card-header">
							<span>目录列表</span>
						</div>
					</template>
					<div class="global-card-table">
						<search-form :query-form="params" :form-span="12" @refresh="refresh">
							<template #firstLine>
								<el-col :span="6" class="search-from-row">
									<el-form-item prop="name" label="名称：">
										<el-input v-model="params.name" placeholder="名称" />
									</el-form-item>
								</el-col>
							</template>
						</search-form>
						<div class="global-table-content">
							<div class="table-button-group">
								<el-button-group>
									<el-button type="primary" size="mini" @click="addvisible = true">
										<el-icon>
											<el-icon-plus />
										</el-icon>
										添加
									</el-button>
									<el-button type="danger" size="mini" @click="addvisible = true">
										<el-icon>
											<el-icon-delete />
										</el-icon>
										删除
									</el-button>
									<el-button type="success" size="mini" @click="refresh">
										<el-icon>
											<el-icon-refresh />
										</el-icon>
										刷新
									</el-button>
								</el-button-group>
							</div>
							<base-page
								ref="videopage"
								:header-row-class-name="'my-table-heard'"
								:header-cell-class-name="'my-table-heard'"
								:row-class-name="'my-table-row'"
								:divclass="'tree-div-page'"
								:data-function="getData"
								:other-params="params"
							>
								<el-table-column label="编号" min-width="10%">
									<template #default="scope">
										<span style="margin-left: 10px">{{ scope.row.id }}</span>
									</template>
								</el-table-column>
								<el-table-column label="真实文件名" min-width="20%">
									<template #default="scope">
										<span style="margin-left: 10px">{{ scope.row.realName }}</span>
									</template>
								</el-table-column>
								<el-table-column label="服务文件名" min-width="20%">
									<template #default="scope">
										<a
											style="margin-left: 10px; color: #0000ff"
											@click="downloadVideo(scope.row.serveName, scope.row.servePath)"
											>{{ scope.row.realName }}</a
										>
									</template>
								</el-table-column>
								<el-table-column label="路径" min-width="20%">
									<template #default="scope">
										<span style="margin-left: 10px">{{ scope.row.servePath }}</span>
									</template>
								</el-table-column>
								<el-table-column label="序号" min-width="10%">
									<template #default="scope">
										<span style="margin-left: 10px">{{ scope.row.listId }}</span>
									</template>
								</el-table-column>
								<el-table-column align="center" label="操作" min-width="20%">
									<template #default="scope">
										<el-button size="mini" type="primary" @click="editForm(scope.$index, scope.row)">
											<el-icon>
												<el-icon-edit />
											</el-icon>
											编辑
										</el-button>
										<el-button size="mini" type="danger" @click="deleteForm(scope.$index, scope.row)">
											<el-icon>
												<el-icon-delete />
											</el-icon>
											删除
										</el-button>
									</template>
								</el-table-column>
							</base-page>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<dir-add :dialog-visible="addvisible" :parent-id="parentid" @changeAdd="setAddVisible" />
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Options, Vue } from 'vue-class-component';
import { WebApi } from '@/assets/model/httpconfig/WebApi';
import { MenuHelper } from '@/assets/model/baseclass/WebHelper';
import { EnumResult } from '@/assets/model/enums/EnumUtil';
import RequestUtil from '@/assets/model/common/RequestUtil';
import SearchForm from '@/components/page/SearchForm.vue';
import { system, recall } from '@/api';

import Add from './Add.vue';
import BasePage from '@/components/page/BasePage';

const Page = defineComponent({
	mounted() {
		this.getCatalog();
	},
	components: {
		'dir-add': Add,
		'search-form': SearchForm,
		'base-page': BasePage
	},
	data: function () {
		return {
			addvisible: false,
			editvisible: false,
			video: new recall.video(),
			videodir: new system.videodir(),
			/**目录编号 */
			parentid: '',
			/**添加表单控制 */
			params: {
				dirId: ''
			},
			editRow: {} as any,
			/**图片菜单数据 */
			menudata: [] as any,
			/**tree树形结构的子节点，文本的字段配置 */
			defaultProps: {
				children: 'children',
				label: 'name'
			}
		};
	},
	methods: {
		setAddVisible(visible: boolean) {
			this.addvisible = visible;
		},
		setEditVisible(visible: boolean) {
			this.editvisible = visible;
		},

		/**获取列表数据 */
		getData(data: any) {
			return this.video.selectvideopage(data);
		},
		/**获取目录数据 */
		getCatalog() {
			let _this = this;
			let menulist: Array<any> = [];
			this.videodir
				.selectvideodirlist()
				.then(function (response) {
					let menuhelp = new MenuHelper();
					if (response.data.data.length > 0) {
						let list = menuhelp.getMenuList(response.data.data, '1');
						menulist.push(list);
						_this.menudata = menulist;
						//console.log(list)
					}
				})
				.catch(function (error) {
					console.log(error);
				});
		},
		/**格式化列表中（是否父节点） */
		formatter(value: any) {
			if (value == '1') {
				return '是';
			} else {
				return '否';
			}
		},
		/**刷新 */
		refresh() {
			let table: any = this.$refs.videopage;
			table.refresh();
		},
		/**节点单机触发方法 */
		NodeClick(data: any) {
			this.parentid = data.id;
			this.params.dirId = data.id;
			this.refresh();
		},
		/**
		 * 编辑目录信息
		 * @param index 索引
		 * @param row 选中行数据
		 */
		editForm(index: any, row: any) {
			this.editRow = row;
			this.editvisible = true;
		},
		//删除目录信息
		deleteForm(index: any, row: any) {
			console.log(row);
			let _this: any = this;
			let data = {
				id: row.id
			};
			_this
				.$confirm('确定删除目录？', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					RequestUtil.OperateData(this.video.deletevideo(data)).then(function (response: EnumResult) {
						if (response == EnumResult.success) {
							_this.refresh();
						}
					});
				})
				.catch(() => {
					_this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		},
		/**查看视频 */
		seeVideo(servename: string, serverpath: string) {
			window.open(WebApi.fileServePath + serverpath + '/' + servename);
		},
		/**下载视频 */
		downloadVideo(servename: string, serverpath: string) {
			window.open(WebApi.fileServePath + serverpath + '/' + servename);
		}
	}
});

export default Page;
</script>

<style lang="scss"></style>
